{{template "admin/header.html"}}
<title>{{T "Blockchain wallet login"}} - GPRESS</title>
<style>
	.gpress-login-container {
		padding: 0 20px;
		width: 450px;
		height: auto;
		/* 定位方式 */
		position: absolute;
		/* 距顶部的百分比值，表示向下移动自身高度的一半 */
		top: 45%;
		/* 距左侧的百分比值，表示向右移动自身宽度的一半 */
		left: 50%;
		/* 通过变换函数将其自身的尺寸的一半作为参数传入，从而达到居中效果 */
		transform: translate(-50%, -50%);
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
		background: #fff;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		box-shadow: 0 0 30px rgba(0, 0, 0, 0.5)
	}

	.login_logo {
		margin: -55px auto 20px;
		width: 100px;
		height: 100px;
		background: #fff;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
		border: 5px solid #fff;
		overflow: hidden;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	}

	.login_logo img {
		width: 100%;
	}

	.gpress-login-other {
		padding: 0;
		width: 100%;
		text-align: center;
		margin-top: 15px;
		margin-bottom: 15px;
	}

	.gpress-login-other a {
		margin-right: 12px;
		margin-left: 12px;
		text-decoration: underline;
	}
</style>
</head>

<body>
	<div class="gpress-login-container">
		<input type="hidden" id="message" value="{{.message}}">
		<div class="login_logo"><img src="{{basePath}}public/logo.png"></div>
		<div><h2 class="gpress-login-other">{{T "Blockchain login"}}</h2></div>
		<form class="layui-form" id="chainlogin" action="{{basePath}}admin/chainlogin" method="post">
			<input type="hidden" id="signature" name="signature" value="">
			<table class="layui-table">
				<tbody>
				  <tr>
					<td width="50%"><a href="javascript:walletLogin(window.ethereum);"> <img src="{{basePath}}public/wallet/metamask.png" />MetaMask </a></td>
					<td width="50%"><a href="javascript:walletLogin(window.xuper);"> <img src="{{basePath}}public/wallet/x-pocket.png" />X-Pocket&nbsp;&nbsp;&nbsp;&nbsp; </a></td>
				  </tr>
				  <tr>
					<td><a href="javascript:walletLogin(window.bitkeep && window.bitkeep.ethereum);"> <img src="{{basePath}}public/wallet/bitkeep.png" />Bitkeep&nbsp;&nbsp;&nbsp;&nbsp; </a></td>
					<td><a href="javascript:walletLogin(window.ethereum);"> <img src="{{basePath}}public/wallet/tokenproket.png" />TokenPocket </a></td>
				  </tr>
				  <tr>
					<td><a href="javascript:walletLogin(window.ethereum);"> <img src="{{basePath}}public/wallet/okx.png" />OkxWallet </a></td>
					<td><a href="javascript:walletLogin(window.ethereum);"> <img src="{{basePath}}public/wallet/TrustWallet.png" />TrustWallet </a></td>
				  </tr>
				</tbody>
			  </table>
		</form>
		<div class="gpress-login-other">
			<a href="{{basePath}}admin/login">{{T "Account password login"}}</a>
			<a href="javascript:retrievepassword();">{{T "Forgot password"}}</a>
			<a href="https://gitee.com/gpress/gpress" target="_blank">{{T "Contact us"}}</a>
		</div>
	</div>
	<script>
		var layer;
		layui.use(function () {
			layer = layui.layer;
			//消息提示
			let msg = document.getElementById('message').value;
			if (msg) {
				layer.msg(msg);
			}
		});

    // 忘记密码
    function retrievepassword(){
		layer.alert('{{T "1. Rename gpressdatadir/template/install.html.bak to install.html </br> 2. Settings updated successfully, restart GPRESS to take effect!, reinitialize administrator account and password, data will not be lost"}}',{title:'{{T "Forgot password"}}'});
	}
    // 钱包登录
    function walletLogin(provider) {
		if (provider) {
			provider.request({
				method: 'eth_requestAccounts',
				params: [],
			}).then(accounts => {
				let account = accounts[0]
				personalSign(provider, account)
			})
		} else {
			layer.msg('{{T "Please install the corresponding wallet"}}');
		}
	}

	function stringToHex(str) {
		let hex = ''
		for (let i = 0; i < str.length; i++) {
			hex += str.charCodeAt(i).toString(16)
		}
		return hex
	}

	async function personalSign(provider, accounts) {
		let jsonObject = {}
		const response = await fetch('{{basePath}}admin/random', {
			method: 'post',
			body: JSON.stringify(jsonObject),
			headers: { 'Content-Type': 'application/json' }
		})
		let res = await response.json()
		
		if (res.statusCode == 1) {
			let arrayboj = [res.data, accounts];
			
			provider.request({
               method: 'personal_sign',
               params: arrayboj,
			}).then(result => {
				document.getElementById("signature").value=result;
				document.getElementById("chainlogin").submit();
			})
		} else {
			layer.msg(res.message);
		}
	}

	</script>

</body>

</html>